<template>
  <div class="basic-container">
    <div class="container-header" v-if="!!navigators.length">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(nav, index) in navigators" :key="index">{{ nav }}</a-breadcrumb-item>
      </a-breadcrumb>
      <span class="title">{{ title }}</span>
      <a-dropdown v-if="$route.name==='relevanceProjectManagement'" class="allProject">
        <a-menu slot="overlay" style="margin-left: 30px;">
          <a-menu-item>同步新增需求</a-menu-item>
          <a-menu-item>同步变更需求</a-menu-item>
          <a-menu-item>同步需求进展 </a-menu-item>
        </a-menu>
        <span style="margin-left: 8px;color:#1890FF"> 全部项目
          <a-icon type="down" style="font-size: 16px;" />
        </span>
      </a-dropdown>
    </div>
    <div class="container-content" v-for="(slot, index) in slots" :key="index">
      <slot :name="slot" v-if="!!slots.length" />
    </div>
    <div class="container-content" v-if="!slots.length">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'BasicContainer',
  props: {
    navigators: {
      type: Array,
      default: () => []
    },
    slots: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ()=>'',
    }
  },
}
</script>

<style scoped>
.basic-container .container-header {
  height: 98px;
  margin-top: 1px;
  background: #FFFFFF;
  padding: 16px 24px;
  line-height: 48px;
}

.basic-container .container-header .title {
  font-size: 20px;
  margin-top: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: normal;
}

.basic-container .container-content {
  background-color: #fff;
  margin: 24px;
  padding: 24px 32px;
  border-radius: 2px;
}

.basic-container .container-header .allProject {
  margin-top: 10px;
  font-size: 16px;
  float: right;
  margin-right: 10px;
}
</style>